import React, { useRef, useCallback } from 'react';
import { Dialog } from '@alifd/next';
import Operation from '../Operation';

const getDialogTitle = (actionType) => {
  switch (actionType) {
    case 'add':
    default:
      return '添加角色';

    case 'edit':
      return '编辑角色';

    case 'preview':
      return '预览角色';
  }
};

const DialogOperation = (props) => {
  const { actionType, roleId, onOk = () => {}, loading, ...lastProps } = props;
  const operationRef = useRef(null);
  const handleOk = useCallback(() => {
    if (actionType === 'preview') {
      return onOk(null);
    }

    operationRef.current.getValues((values) => {
      if (values.menuIdList === '') {
        // eslint-disable-next-line no-param-reassign
        values.menuIdList = [];
      } else {
        // eslint-disable-next-line no-param-reassign
        values.menuIdList = values.menuIdList.split(',').map(Number);
      }
      onOk(values);
    });
  }, [actionType, onOk]);
  return (
    <Dialog
      shouldUpdatePosition
      isFullScreen
      title={getDialogTitle(actionType)}
      style={{ width: 600 }}
      {...lastProps}
      onOk={handleOk}
      okProps={{ loading }}
    >
      <Operation ref={operationRef} actionType={actionType} roleId={roleId} />
    </Dialog>
  );
};

export default DialogOperation;
